模态展示

Scripting App 提供了对 SwiftUI 风格的模态视图展示的支持。开发者可以通过向组件声明特定的属性,实现类似 sheetpopoverfullScreenCoveralertconfirmationDialog 的展示行为。这些展示是响应状态变化的,并支持多种配置项,以满足在不同屏幕尺寸和交互需求下的使用场景。


Alert(警告弹窗)

当条件为真时,展示一个带标题、可选消息和操作按钮的警告弹窗。

1alert?: {
2  title: string
3  isPresented: boolean
4  onChanged: (isPresented: boolean) => void
5  actions: VirtualNode
6  message?: VirtualNode
7}

字段说明

  • title:弹窗的标题文本。
  • isPresented:控制弹窗是否显示的布尔值。
  • onChanged:当 isPresented 状态变化时调用的回调函数。需要在用户关闭弹窗时将其更新为 false
  • actions:表示操作按钮的 VirtualNode
  • message(可选):用于展示附加信息的 VirtualNode

Confirmation Dialog(确认对话框)

展示一个确认对话框,包含标题、可选消息和操作项。

1confirmationDialog?: {
2  title: string
3  titleVisibility?: Visibility
4  isPresented: boolean
5  onChanged: (isPresented: boolean) => void
6  actions: VirtualNode
7  message?: VirtualNode
8}

字段说明

  • title:对话框的标题。
  • titleVisibility(可选):标题是否显示,默认值为 "automatic"
  • isPresented:是否显示对话框。
  • onChanged:用于更新 isPresented 状态的回调。
  • actions:对话框操作项。
  • message(可选):附加消息内容。
1type Visibility = "automatic" | "hidden" | "visible"

Sheet(底部弹窗)

从底部弹出模态视图,通常用于展示中等重要性的内容。支持传入单个或多个配置项。

1sheet?: ModalPresentation | ModalPresentation[]

Full Screen Cover(全屏覆盖视图)

展示一个覆盖全屏的模态视图。可传入多个视图配置。

1fullScreenCover?: ModalPresentation | ModalPresentation[]

Popover(弹出菜单)

展示一个带箭头的弹出内容区域,通常用于 iPad 或大屏设备上。可设置适配策略及箭头位置。

1popover?: PopoverPresentation | PopoverPresentation[]

PopoverPresentation 类型定义

1type PopoverPresentation = ModalPresentation & {
2  arrowEdge?: Edge
3  presentationCompactAdaptation?: PresentationAdaptation | {
4    horizontal: PresentationAdaptation
5    vertical: PresentationAdaptation
6  }
7}

字段说明

  • arrowEdge(可选):弹出箭头指向的边,默认是 "top"
  • presentationCompactAdaptation(可选):在紧凑环境下的展示适配策略。
1type Edge = "top" | "bottom" | "leading" | "trailing"

ModalPresentation(通用模态视图结构)

该类型被 sheetpopoverfullScreenCover 使用,定义了基础展示结构。

1type ModalPresentation = {
2  isPresented: boolean
3  onChanged: (isPresented: boolean) => void
4  content: VirtualNode
5}

字段说明

  • isPresented:控制是否展示模态视图。
  • onChanged:模态视图关闭或显示时触发的状态更新回调。
  • content:展示内容的 VirtualNode

PresentationAdaptation(展示适配策略)

指定在不同尺寸环境下的视图展示方式。

1type PresentationAdaptation =
2  | "automatic"
3  | "fullScreenCover"
4  | "none"
5  | "popover"
6  | "sheet"
  • automatic:系统自动选择合适的展示方式。
  • fullScreenCover:优先使用全屏覆盖。
  • popover:优先使用弹出菜单形式。
  • sheet:优先使用底部弹窗。
  • none:尽量保持原始展示方式,不做适配。

示例用法

展示 Sheet

1<Button
2  title={"Present"}
3  action={() => setIsPresented(true)}
4  sheet={{
5    isPresented: isPresented,
6    onChanged: setIsPresented,
7    content: <VStack>
8      <Text>Sheet 内容</Text>
9      <Button title={"Dismiss"} action={() => setIsPresented(false)} />
10    </VStack>
11  }}
12/>

展示 Popover

1<Button
2  title={"Show Popover"}
3  action={() => setIsPresented(true)}
4  popover={{
5    isPresented: isPresented,
6    onChanged: setIsPresented,
7    presentationCompactAdaptation: "popover",
8    content: <Text>Popover 内容</Text>,
9    arrowEdge: "top",
10  }}
11/>

展示 Full Screen Cover

1<Button
2  title={"Present"}
3  action={() => setIsPresented(true)}
4  fullScreenCover={{
5    isPresented: isPresented,
6    onChanged: setIsPresented,
7    content: <VStack>
8      <Text>全屏模态视图</Text>
9    </VStack>
10  }}
11/>

配置 Sheet 高度

1sheet={{
2  isPresented: isPresented,
3  onChanged: setIsPresented,
4  content: <VStack
5    presentationDetents={[200, "medium", "large"]}
6    presentationDragIndicator={"visible"}
7  >
8    <Text>可拖动调整高度的 Sheet</Text>
9  </VStack>
10}}

展示 Alert

1<Button
2  title={"Present"}
3  action={() => setIsPresented(true)}
4  alert={{
5    isPresented: isPresented,
6    onChanged: setIsPresented,
7    title: "警告",
8    message: <Text>一切正常</Text>,
9    actions: <Button title={"OK"} action={() => {}} />
10  }}
11/>

展示 Confirmation Dialog

1<Button
2  title={"Present"}
3  action={() => setIsPresented(true)}
4  confirmationDialog={{
5    isPresented,
6    onChanged: setIsPresented,
7    title: "是否删除此图片?",
8    actions: <Button title={"删除"} role={"destructive"} action={() => {}} />
9  }}
10/>